<template>
	<view id="chat-box">
		<NavBar>
			<block slot="left">
				<text class="iconfont icon-fanhui back"></text>
			</block>
			<block slot="title">沟通群聊</block>
			<block slot="right">
				<text class="iconfont icon-gengduo" @click="setHandle"></text>
			</block>
		</NavBar>
		<scroll-view scroll-y id="msg"  :show-scrollbar="false" :scroll-top="msgScrollTop" :lower-threshold="200" @click="closeHandle" @touchstart="closeHandle"  @scrolltolower="reachTop">
			<view class="content">
			<view style="flex:1"></view>
			<template v-for="(item,index) in msgList">
				<view v-if="!item.role" :key="item.id"  class="item left">
					<image class="f" mode="aspectFill" src="../../static/face.png"></image>
					<!-- 文字、文件、音频 -->
					<view class="r">
						<view class="name">理解</view>
						<view class="c" v-if="[0,2,3].includes(item.type)" @click="msgClickHandle(item)">
							<block v-if="item.type === 0">
								<text>{{item.text}}</text>
							</block>
							<block v-else-if="item.type === 2">
								<view class="file-card">
									<view class="info">
										<view class="title">{{item.text}}</view>
										<view class="size">{{item.fileSize}}</view>
									</view>
									<view class="file-icon" :class="[item.text.split('.')[1]]"></view>
								</view>
							</block>
							<block v-else>
								<micro style="margin-right:15rpx;" :play="item.id == inPlay"></micro>
								<text>{{item.fileDuration}}″</text>
							</block>
						</view>
						<!-- 图片 -->
						<image v-else class="b" mode="widthFix" :src="item.fileUrl" @click="msgClickHandle(item)"></image>
					</view>
					
				</view>
				<view v-else :key="item.id" class="item right">
					<!-- 文字、文件、音频 -->
					<view class="r">
				    <view class="c" v-if="[0,2,3].includes(item.type)" :class="[item.type === 2?'no-bg':'']"  @click="msgClickHandle(item)">
						<block v-if="item.type === 0">
							<text>{{item.text}}</text>
						</block>
						<block v-else-if="item.type === 2">
							<view class="file-card">
								<view class="info">
									<view class="title">{{item.text}}</view>
									<view class="size">{{item.fileSize}}</view>
								</view>
								<view class="file-icon" :class="[item.text.split('.')[1]]"></view>
							</view>
						</block>
						<block v-else>
							  <text>{{item.fileDuration}}″</text>	
							  <micro :play="item.id == inPlay" style="transform: rotate(180deg);margin-left:15rpx;"></micro>
						</block>
					</view>
					<!-- 图片 -->
					<image v-else class="b" mode="widthFix" :src="item.fileUrl" @click="msgClickHandle(item)"></image>
					</view>
					<image class="f" mode="aspectFill" src="../../static/face.png"></image>
				</view>
			</template>
			</view>
		</scroll-view>
		<view id="place-block" :style="{height:(translateY + increaseHeight + 51) + 'px'}"></view>
		<view id="send" :style="{bottom:translateY + 'px'}">
			<view class="iconfont audio" :class="[mode === 'text'?'icon-yuyin':'icon-jianpan']" @click="changeMode"></view>
			<scroll-view v-if="mode === 'text'"  scroll-y :scroll-top="scrollTop" :scroll-with-animation="true" class="text">
			  <textarea class="textarea" v-model="msg" :confirm-hold="true" :auto-height="true" :adjust-position="false" :focus="autoFocus" @input="textChange" @linechange="textLineChange"></textarea>
			</scroll-view>
			<record v-if="mode === 'audio'" @send="sendHandle"></record>
			<view class="iconfont face  icon-smile"></view>
			<view class="iconfont other icon-xinzeng" v-if="!sendVisible" @click="showOthers"></view>
			<button  class="send-handle" :class="[sendVisible?'show':'']" @touchend.prevent="sendHandle">发送</button>
		</view>
		<view id="others" :class="[otherVisible?'show':'']" :style="{height:translateY || 284 + 'px'}" style="bottom:0;">
			<view class="tools">
				<view class="t iconfont gallery icon-xiangce" @click="chooseMedia(['album'])">
					<text>相册</text>
				</view>
				<view class="t iconfont camera icon-xiangji" @click="chooseMedia(['camera'])">
					<text>拍摄</text>
				</view>
				<view class="t iconfont doc icon-file" @click="openFile">
					<text>文件</text>
				</view>
				<view class="t iconfont icon-luyin">
					<text>单据</text>
				</view>
				<!-- <view class="t iconfont card icon-weizhi">
					<text>位置</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
// import permision from "./permission.js"
import record from './record.vue';
import micro from './components/micro.vue';
import NavBar from './components/navBar.vue'

const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = false;
/*
  0文字 1图片 2文件 3音频
*/ 
export default {
   components:{
	   record,
	   micro,
	   NavBar
   },
   data() {
		return {
			translateY:0, //工具栏上移距离
			KeyboardHeight:0, //键盘高度
			lineHeight:0, //默认行高
			increaseHeight:0, //增加的行高
			msgScrollTop:0,
			scrollTop:0,
			mode:'text', //输入方式 语音/文字
			otherVisible:false, //工具栏显示
			autoFocus:false, //自动获取焦点
			sendVisible:false, //发送按钮显隐
			msg:"",//待发送内容
			inSending:'',
			fileList:[],
			scrollIntoIndex:'',
			topIndex:0,
			msgList:[
				{ 
					id:0,
					text:'小时前小编发1',
					role:1,
					type:0
				},
				{
					id:19,
					text:'小时前小编发12',
					role:0,
					type:0
				},
				{
					id:1,
					text:'发送按钮显隐自动获取焦点工具栏显示',
					role:0,
					type:0
				},
				{
					id:2,
					text:'新建文本文档 (3).txt',
					role:1,
					type:2,
					fileUrl:'https://testappthwater.thwater.com:30080/group1/M00/03/CF/wKgIyGbH-n-AY4FUAAAISfBil7Q012.txt',
					fileSize:'11M'
				},
				{
					id:3,
					text:'测试情况记录表2024-07111111111111汇总.xlsx',
					role:0,
					type:2,
					fileUrl:'https://testappthwater.thwater.com:30080/group1/M00/03/CF/wKgIyGbH-oSAcHaeACgDYfeExDc43.xlsx'
				},
				{
					id:4,
					text:'小时前小编发',
					role:1,
					type:3,
					fileUrl:'https://testappthwater.thwater.com:30080/group1/M00/03/E5/wKgIyGcZ6ZaAaMAdAAAuITV77D0489.wav',
					play:false,
					fileDuration:28
				},
				{
					id:5,
					text:'小时前小编发',
					role:0,
					type:3,
					fileUrl:'https://testappthwater.thwater.com:30080/group1/M00/03/E5/wKgIyGcZ6ZaAaMAdAAAuITV77D0489.wav',
					play:false,
					fileDuration:11
				},
				{
					id:6,
					text:'小时前小编发',
					role:1,
					type:0
				},
				{
					id:7,
					text:'sync 表示函数里有异步操作, await 表示紧跟在后面的表达式需要等待结果。 同Generator 函数一样,async函数返回一个Promise对象,可以使用then方法添加回调函数。',
					role:0,
					type:1,
					fileUrl:'../../static/80cb39dbb6fd5266bcd00b5d18432c2cd5073666.jpg'
				},
				{
					id:8,
					text:'小时前小编发10',
					role:1,
					type:1,
					fileUrl:'../../static/mic-blue.png'
				},
			],
			shiftMsg:[
				{
					id:0,
					text:'小时前小编发00',
					role:1,
					type:0
				},
				{
					id:1,
					text:'发送按钮显隐自动获取焦点工具栏显示',
					role:0,
					type:0
				},
				{
					id:2,
					text:'新建文本文档 (3).txt',
					role:1,
					type:2,
					fileUrl:'https://testappthwater.thwater.com:30080/group1/M00/03/CF/wKgIyGbH-n-AY4FUAAAISfBil7Q012.txt',
					fileSize:'11M'
				},
				{
					id:3,
					text:'测试情况记录表2024-07111111111111汇总.xlsx',
					role:0,
					type:2,
					fileUrl:'https://testappthwater.thwater.com:30080/group1/M00/03/CF/wKgIyGbH-oSAcHaeACgDYfeExDc43.xlsx'
				},
				{
					id:4,
					text:'小时前小编发',
					role:1,
					type:3,
					fileUrl:'https://testappthwater.thwater.com:30080/group1/M00/03/E5/wKgIyGcZ6ZaAaMAdAAAuITV77D0489.wav',
					play:false,
					fileDuration:28
				},
				{
					id:5,
					text:'小时前小编发',
					role:0,
					type:3,
					fileUrl:'https://testappthwater.thwater.com:30080/group1/M00/03/E5/wKgIyGcZ6ZaAaMAdAAAuITV77D0489.wav',
					play:false,
					fileDuration:11
				},
				{
					id:6,
					text:'小时前小编发',
					role:1,
					type:0
				},
				{
					id:7,
					text:'sync 表示函数里有异步操作, await 表示紧跟在后面的表达式需要等待结果。 同Generator 函数一样,async函数返回一个Promise对象,可以使用then方法添加回调函数。',
					role:0,
					type:1,
					fileUrl:'../../static/80cb39dbb6fd5266bcd00b5d18432c2cd5073666.jpg'
				},
				{
					id:8,
					text:'小时前小编发10',
					role:1,
					type:0
				},
			],
			rest:0,
			inPlay:'',
			canShift:true,
			times:0,
			scrolTop:0,
			old:{
				scrolTop:0,
			},
			oldheight:0,//标签位置
			newheight:0 //新窗口高度
		}
	},
	methods:{
		setHandle(){
			uni.navigateTo({
				url:'/pages/chat/groupSetting'
			})
		},
		checkRecordAuth(){
			// return new Promise((resolve)=>{
			// 	 permision.requestAndroidPermission('android.permission.RECORD_AUDIO').then(res=>{
			// 	 	if(res !== 1){
			// 			resolve(false);
			// 	 	}else{
			// 			resolve (true)
			// 		}
			// 	 })
			// })
		},
       async changeMode(){
			if(this.mode === 'text'){
				const hasAuth = await  this.checkRecordAuth();
				if(!hasAuth){
					uni.showModal({
						title:'提示',
						content:'没有录音权限，请前往授权麦克风',
						success(res){
							if(res.confirm){
								uni.openAppAuthorizeSetting();	
							}
						}
					})
					return;
				};
				this.otherVisible = false
				this.translateY = 0;
			    this.sendVisible = false;
				this.mode = 'audio'
			}else{
				this.mode = 'text';
				this.autoFocus = true;
				if(this.msg){
					 this.sendVisible = true;
				}
			}
		},
		showOthers(){
			if(this.otherVisible){
				this.otherVisible = false;
				this.autoFocus = true;
			}else{
				this.mode = 'text'
				this.otherVisible = true;
				this.autoFocus = false;
				this.translateY = this.KeyboardHeight || 284;
				// this.msgScrollTop = Date.now();
			}
		},
		closeHandle(){
			this.autoFocus = false
			this.otherVisible = false
			this.translateY = 0
			uni.hideKeyboard();
		},
		textChange(e){
			const msg = e.detail.value.trim();
			if(msg.length){
				this.sendVisible = true
			}else{
				this.sendVisible = false
			}
		},
		textLineChange(e){
			const { height, lineCount } = e.target;
			if(!this.lineHeight) this.lineHeight = height;
			const r = height - this.lineHeight;
			// 计算
			this.increaseHeight = r > 200 ? 200 : r;
			setTimeout(()=>{
				// this.msgScrollTop = Date.now()
				this.scrollTop = this.msgScrollTop
			})
		},
		sendMsg(msg){
			return new Promise((resolve)=>{
				setTimeout(()=>{
					resolve(true)
				},300)
			})
		},
		async sendHandle (e){
			if(this.inSending) return;
			this.inSending = true;
			const msg  = {
			   role:1,
			   id:new Date().getTime(),
			   type:0,
			   text: this.msg
			}
			const done =  await this.sendMsg(msg);
			this.inSending= false;
			if(done){
				this.msgList.unshift(msg);
				this.sendVisible = false;
				this.msg = ''
			}
		},
		reachTop(){
			// console.log(111)
			// return;
			this.topIndex = this.msgList[3].id;
			if(!this.canShift) return;
			this.canShift = false;
			setTimeout(()=>{
				this.canShift = true;
				this.times+=1;
				const newList = [...this.shiftMsg].map((item,index)=>{
					item.id = this.times*8 + 1 + index; 
					return {...item};
				})

				this.msgList = [...this.msgList,...newList];
			},300)
		},
		msgClickHandle(item){
			switch(item.type){
				case 0:
				  console.log('copy')
				  break;
				case 1:
				  this.previewImage(item)
				  break;
				case 2:
				 this.openDocument(item);
				  break;
				case 3:
				  this.playVoice(item);
				  break;
				default:
				  break;
			}
		},
		previewImage(item){
			const images = this.msgList.filter(msg=>msg.type === 1);
			const urls = images.map(img=>img.fileUrl);
			let current = 0;
			images.forEach((img,ind)=>{
				if(img.id === item.id){
					current = ind
				}
			})

			uni.previewImage({
				current,
				urls
			})
		},
		openDocument(item){
			if(item.tempFilePath){
				uni.openDocument({
				  filePath: item.tempFilePath,
				  showMenu: true
				});
				return;
			}
			uni.showLoading({
				title:'正在下载'
			})
			uni.downloadFile({
			  url: item.fileUrl,
			  success: function (res) {
				uni.hideLoading();
			    var filePath = res.tempFilePath;
				item.tempFilePath = res.tempFilePath;
			    uni.openDocument({
			      filePath: filePath,
			      showMenu: true
			    });
			  }
			});
		},
		playVoice(item){
			if(this.inPlay === item.id) {
				innerAudioContext.stop();
				this.inPlay = '';
				return;
			};
			innerAudioContext.stop();
			innerAudioContext.src = item.fileUrl;
			if(plus.device.getVolume()<0.1){
			  uni.showToast({
				title:'播放音量可能过低',
				icon:'none'
			  })
			}  
			innerAudioContext.play();
			
			this.inPlay = item.id;
			
			innerAudioContext.onEnded(() => {
			  //自动切换事件
			  this.inPlay = '';
			});
		},
		chooseMedia(sourceType = ["camera", "album"]) {
			uni.chooseImage({
				count: 9,
				sizeType: ["original", "compressed"],
				sourceType,
				mediaType: "mix",
				success: (files) => {
					const tempFiles = files.tempFiles.map((file, index) => {
						return {
							id: new Date().getTime(),
							progress: 0,
							type: "image",
							src: "",
							path: file.path,
						};
					});
					console.log(tempFiles);
				},
			});
		},
		transformToWordHandle(){
			// transformToWord({fileUrl:'https://testappthwater.thwater.com:30080/group1/M00/03/E5/wKgIyGcZ6ZaAaMAdAAAuITV77D0489.wav'}).then(res=>{
			// 	console.log(res);
			// })
		},
		resultPath(e) {
			// this.path = e;
			uni.uploadFile({
				url: `https://testappthwater.thwater.com:30080/api/oss/sysOss/uploadQC`,
				filePath: e,
				name: 'file',
				header: {
					// 'Authorization': cache.get('token')
					// 'Authorization': 'Bearer Npiy1pweR6eQ2YCyzoiPCwgRJOLGeA87aQzz7F9D9sH9DM5NFnOs7kQSiWUpPu9VN2YU3u2DYDax7RdDYlspCQnTVvGQETeeqySPrr68khnu_8fhfPw4QoUXnixYraHm'
				},
				success: (res) => {
					const resp = JSON.parse(res.data)
					const {url,fileName,fileSize} = resp.data;
					this.msgList.push({
					   role:1,
					   id:new Date().getTime(),
					   type:2,
					   fileUrl:url,
					   text: fileName,
					   fileSize
					})
				},
				fail(err) {
					uni.showToast({
						title:'上传失败'
					})
				}
			})
			// this.msgList.push({
			//    role:1,
			//    id:new Date().getTime(),
			//    type:0,
			//    text: e
			// })
		},
		openFile() {
			// #ifdef APP-PLUS
			if (plus.os.name.toLowerCase() != "android") {
				uni.showModal({
					title: '提示',
					content: '仅支持Android平台',
					success: function(res) {}
				});
				return false
			}
			let that = this
			// java 代码来自 http://www.cnblogs.com/panhouye/archive/2017/04/23/6751710.html
			let main = plus.android.runtimeMainActivity();
			let Intent = plus.android.importClass("android.content.Intent");
		
			// 
			let fileIntent = new Intent(Intent.ACTION_GET_CONTENT)
			//fileIntent.setType(“image/*”);//选择图片
			//fileIntent.setType(“audio/*”); //选择音频
			//fileIntent.setType(“video/*”); //选择视频 （mp4 3gp 是android支持的视频格式）
			//fileIntent.setType(“video/*;image/*”);//同时选择视频和图片
			fileIntent.setType("*/*"); //无类型限制
			fileIntent.addCategory(Intent.CATEGORY_OPENABLE);
			main.startActivityForResult(fileIntent, 1);
			// 获取回调
			main.onActivityResult = function(requestCode, resultCode, data) {
				let Activity = plus.android.importClass("android.app.Activity");
				let ContentUris = plus.android.importClass("android.content.ContentUris");
				let Cursor = plus.android.importClass("android.database.Cursor");
				let Uri = plus.android.importClass("android.net.Uri");
				let Build = plus.android.importClass("android.os.Build");
				let Environment = plus.android.importClass("android.os.Environment");
				let DocumentsContract = plus.android.importClass("android.provider.DocumentsContract");
				let MediaStore = plus.android.importClass("android.provider.MediaStore");
				// 给系统导入 contentResolver
				let contentResolver = main.getContentResolver()
				plus.android.importClass(contentResolver);
				// 返回路径
				let path = '';
				if (resultCode == Activity.RESULT_OK) {
					let uri = data.getData()
					if ("file" == uri.getScheme().toLowerCase()) { //使用第三方应用打开
						path = uri.getPath();
						return;
					}
					if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT) { //4.4以后
						path = getPath(this, uri);
					} else { //4.4以下下系统调用方法
						path = getRealPathFromURI(uri)
					}
					// 回调
					that.resultPath(path)
					// that.$emit('result', path)
				}
				// 4.4 以上 从Uri 获取文件绝对路径
				function getPath(context, uri) {
					let isKitKat = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT;
					let scheme = uri.getScheme().toLowerCase()
					if (isKitKat && DocumentsContract.isDocumentUri(context, uri)) {
						// ExternalStorageProvider
						if (isExternalStorageDocument(uri)) {
							let docId = DocumentsContract.getDocumentId(uri);
							let split = docId.split(":");
							let type = split[0];
							// 如果是手机内部存储
							if ("primary" == type.toLowerCase()) {
								return Environment.getExternalStorageDirectory() + "/" + split[1];
							} else {
								return '/storage/' + type + "/" + split[1];
							}
						}
						// DownloadsProvider
						else if (isDownloadsDocument(uri)) {
							let id = DocumentsContract.getDocumentId(uri);
							let split = id.split(":");
							return split[1]
							// console.log(id)
							// let contentUri = ContentUris.withAppendedId(Uri.parse("content://downloads/public_downloads"), id);
							// return getDataColumn(context, contentUri, null, null);
						}
						// MediaProvider
						else if (isMediaDocument(uri)) {
							let docId = DocumentsContract.getDocumentId(uri);
							let split = docId.split(":");
							let type = split[0];
							let contentUri = null;
							if ("image" == type.toLowerCase()) {
								contentUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
							} else if ("video" == type.toLowerCase()) {
								contentUri = MediaStore.Video.Media.EXTERNAL_CONTENT_URI;
							} else if ("audio" == type.toLowerCase()) {
								contentUri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;
							}
							let selection = "_id=?";
							let selectionArgs = [split[1]];
							return getDataColumn(context, contentUri, selection, selectionArgs);
						}
					}
					// MediaStore (and general)
					else if ("content" == scheme) {
						return getDataColumn(context, uri, null, null);
					}
					// File
					else if ("file" == scheme) {
						return uri.getPath();
					}
				}
				// 4.4 以下 获取 绝对路径
				function getRealPathFromURI(uri) {
					let res = null
					let proj = [MediaStore.Images.Media.DATA]
					let cursor = contentResolver.query(uri, proj, null, null, null);
					if (null != cursor && cursor.moveToFirst()) {;
						let column_index = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
						res = cursor.getString(column_index);
						cursor.close();
					}
					return res;
				}
				// 通过uri 查找出绝对路径
				function getDataColumn(context, uri, selection, selectionArgs) {
					let cursor = null;
					let column = "_data";
					let projection = [column];
					// let contentResolver = context.getContentResolver()
					// plus.android.importClass(contentResolver);
					cursor = contentResolver.query(uri, projection, selection, selectionArgs, null);
					if (cursor != null && cursor.moveToFirst()) {
						let column_index = cursor.getColumnIndexOrThrow(column);
						return cursor.getString(column_index);
					}
				}
		
				function isExternalStorageDocument(uri) {
					return "com.android.externalstorage.documents" == uri.getAuthority() ? true : false
				}
		
				function isDownloadsDocument(uri) {
					return "com.android.providers.downloads.documents" == uri.getAuthority() ? true : false
				}
		
				function isMediaDocument(uri) {
					return "com.android.providers.media.documents" == uri.getAuthority() ? true : false
				}
			}
			// #endif
			// #ifndef APP-PLUS
			uni.showModal({
				title: '提示',
				content: '仅支持Android平台',
				success: function(res) {
		
				}
			});
			// #endif
		},
	},
	onLoad(){
		uni.onKeyboardHeightChange(async (e)=>{
			// 键盘弹出
			if(e.height){
				this.otherVisible = false
				this.KeyboardHeight = e.height;
				// this.msgScrollTop = Date.now();
				// 输入框上移动
				this.translateY = e.height;
			}else{
				if(!this.otherVisible){
					this.translateY  = 0;
				}
			}
		})
		
		this.$nextTick(()=>{
			setTimeout(()=>{
				const query = uni.createSelectorQuery();
				query.select('#chat-box').boundingClientRect()
				query.selectAll('.item').boundingClientRect()
				query.exec(([v1,v2])=>{
					this.rest = v1.height -  v2.map(item=>item.height).reduce((total,cur)=>{return total + cur});
				})
				
			   // this.msgScrollTop = Date.now()
			},200)
		})
	}
}
</script>

<style lang="scss">
$baseColor:#e6e6e6;
$border:1rpx solid $baseColor;
@mixin radius-button{
	width:78rpx;
	min-width:78rpx;
	height:78rpx;
}
#chat-box{
	height:100vh;
	display:flex;
	flex-direction: column;
	position:relative;
	background:$baseColor;
	// &::-webkit-scrollbar{ 
	// 	display: none 
	// }
	#msg{
		width:100%;
		overflow: scroll;
		transition: all 1s;
		transform: rotate(180deg);
		flex:1;
		.item{
			display:flex;
			padding:30rpx 20rpx;
			transform: rotate(180deg);
			&.right{
				justify-content: flex-end;
				.c{
					margin-right:15rpx;
					background: #95ec69;
					&.no-bg{
					    background: #fff;
					}
					&::before{
						right:-13rpx;
					}
				}
				.b{
					margin-right:15rpx;
				}
			}
			&.left{
				justify-content: flex-start;
				.c{
					margin-left:20rpx;
					background: #fff;
					&::before{
						left:-1rpx;
					}
				}
				.b{
					margin-left:20rpx;
				}
				.name{
					margin-left:20rpx;
					margin-bottom:7rpx;
					line-height: 100%;
					color:#333;
					font-size:24rpx;
				}
			}
			.f{
				width:70rpx;
				min-width:70rpx;
				height:70rpx;
				border-radius:8rpx;
			}
			.c{
				max-width:450rpx;
				padding:15rpx 20rpx;
				font-size:30rpx;
				border-radius:8rpx;
				text-align: justify;
				position: relative;
				display:flex;
				align-items: center;
				.file-card{
					display:flex;
					min-width:450rpx;
					.info{
						flex:1;
						.title{
						  word-break: break-all;
						  display: -webkit-box;
						  -webkit-box-orient: vertical;
						  -webkit-line-clamp: 2;
						  overflow: hidden;
						  text-overflow: ellipsis;
						}
						.size{
							color:#bfbfbf;
							font-size:28rpx;
							margin-top:10rpx;
						}
					}
					.file-icon{
						width:70rpx;
						height:70rpx;
						margin:10rpx 0 0 15rpx;
						&.doc,&.docx{
							background: url(@/static/doc/word.png);
							background-size: contain;
						}
						&.pdf{
							background: url(@/static/doc/pdf.png);
							background-size: contain;
						}
						&.xlsx{
							background: url(@/static/doc/xlsx.png);
							background-size: contain;
						}
						&.txt{
							background: url(@/static/doc/txt.png);
							background-size: contain;
						}
						&.other{
							background: url(@/static/doc/other.png);
							background-size: contain;
						}
					}
				}
				&::before{
					content:'';
					width:20rpx;
					height:20rpx;
					border-radius:3rpx;
					position:absolute;
					transform: rotate(-45deg) translateX(-50%);
					top: 18rpx;
					background:inherit;
				}
			}
			.b{
				border-radius:8rpx;
				max-width:200rpx;
			}
		}
	}
	#send{
		position:fixed;
		bottom:0;
		width:100%;
		display:flex;
		width:calc(100% - 50rpx);
		padding:11rpx 25rpx;
		align-items: flex-end;
		background:#f4f4f4;
		border-bottom:1rpx solid $baseColor;
		border-top:1rpx solid $baseColor;
		transition:bottom .15s;
		.text{
			max-height:218px;
			overflow-y:scroll;
			flex:1;
			padding:18rpx;
			background:#fff;
			margin-right:10rpx;
			margin-left:10rpx;
			border-radius:10rpx;
			.textarea{
				width:100%;
				margin:0;
				padding:0;
				outline:none;
				font-size:30rpx;
				caret-color:#95ec69;
			}
		}
		.iconfont{
			text-align:center;
			line-height:78rpx;
			font-size:66rpx;
		}
		.audio{
			@include radius-button;
		}
		.face{
			@include radius-button;
			margin-right:10rpx;
		}
		.other{
			@include radius-button;
		}
		.send-handle{
			width:0;
			padding:0;
			mergin:0;
			height:62rpx;
			line-height:62rpx;
			font-size:28rpx;
			margin-bottom:7rpx;
			background-color: #07c160;
			color:#fff;
			overflow:hidden;
			transition:all .2s;
			&::after{
			  border: none;
			}
			&.show{
				width:120rpx;
			}
		}
	}
	#others{
		position:fixed;
		bottom:0;
		width:100%;
		transform: translateY(100%);
		transition:all .15s;
	    background: #f4f4f4;
		&.show{
			transform: translateY(0);
		}
		.tools{
			display:flex;
			padding:70rpx 70rpx 10rpx 70rpx;
			justify-content: space-between;
			.t{
				width:110rpx;
				height:110rpx;
				background:#fff;
				border-radius:30rpx;
				position:relative;
				text{
					position:absolute;
				    bottom: -40rpx;
					font-size:24rpx;
					line-height:1;
					width:110rpx;
					left:0;
					text-align:center;
					color:#333;
				}
			}
			.iconfont{
				font-size:46rpx;
				line-height:110rpx;
				text-align: center;
			}
		}
	}
	
	.record{
		position: fixed;
		left:0;
		top:0;
		right:0;
		bottom:0;
		padding:220rpx 0;
		background:linear-gradient(#3b8aff,#4cb8ff);
		z-index:999;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		transition: all .3s;
		.cancel{
			width:70rpx;
			height:40rpx;
			text-align:center;
			line-height:37rpx;
			position:absolute;
			right:30rpx;
			font-size:25rpx;
			top:90rpx;
			color:#fff;
			opacity:0.8;
			border-radius: 20rpx;
			border:1rpx solid #fff;
		}
		.time{
			font-size:28rpx;
			text-align: center;
	        margin: 0 auto;
			letter-spacing:2rpx;
			color:#fff;
			font-size:52rpx;
		}
		.loading{
			width: 160rpx;
			height: 40rpx;
			display:flex;
			justify-content: space-between;
			margin: 0 auto 120rpx;
			opacity:0;
			span{
				display: inline-block;
				width: 8rpx;
				height: 100%;
				border-radius: 4rpx;
				background: lightgreen;
			}
			&.on{
				opacity:1;
				span{
					-webkit-animation: load .8s ease infinite;
				}
			}
			span:nth-child(2){
				-webkit-animation-delay:0.13s;
			}
			span:nth-child(3){
				-webkit-animation-delay:0.26s;
			}
			span:nth-child(4){
				-webkit-animation-delay:0.39s;
			}
			span:nth-child(5){
				-webkit-animation-delay:0.52s;
			}
		}
		.trigger{
			width:220rpx;
			height:220rpx;
			margin:0 auto;
			position: relative;
			&::after{
				content: '长按录音';
				width:4em;
				position:absolute;
				bottom:-70rpx;
				color:#f1f1f1;
				font-size:26rpx;
				left:50%;
				transform: translateX(-50%);
			}
			&.reset::after{
					content: '点击可重置';
					position:absolute;
					width:5em;
					bottom:-70rpx;
					color:#f1f1f1;
					font-size:26rpx;
					left:50%;
					transform: translateX(-50%);
			}
			.switch{
				width:200rpx;
				height:200rpx;
				border-radius:50%;
				left:50%;
				top:50%;
				bottom:200rpx;
				position:absolute;
				transform: translate(-50%,-50%);
				background-color: rgba(255,255,255,.5);
			}
			.major{
				width:150rpx;
				height:150rpx;
				position:absolute;
				top:50%;
				left:50%;
				border-radius:50%;
				transform: translate(-50%,-50%);
				background:#fff url(@/static/mic-blue.png) center center no-repeat;
				background-size: 40% 40%;
				opacity:0.8;
				&.reset{
					background:#fff url(@/static/chongzhi.png) center center no-repeat;
					background-size: 40% 40%;
				}
			}
			&.on {
				.switch{
					animation: breathe .6s alternate infinite;
				}
				.major{
					background:rgba(59,138,255,0.8) url(@/static/mic-white.png) center center no-repeat;
					background-size: 40% 40%;
				}
			}	
		}
		.btns{
			height:120rpx;
			line-height:120rpx;
			color:#fff;
			view{
				display:flex;
				justify-content:space-between;
				padding:0 60rpx;
				.btn{
					width:120rpx;
					height:120rpx;
					line-height:120rpx;
					text-align: center;
					border-radius: 50%;
					background:#fff;
				}
			}
		}
	}
}
.content{
	height:100%;
	display: flex;
	flex-direction: column;
	
}
</style>